<template>
  <div id="deduction_record">
    <div id="search_box">
      <el-card shadow="hover">
        <el-row>
          <el-col :offset="0" :span="9">
            <span class="title_span">考评时间：</span>
            <el-date-picker
              v-model="date_arr"
              type="daterange"
              format="yyyy年M月d日"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="change_date"
            />
          </el-col>
          <el-col :span="6">
            <span class="title_span">被考评教师：</span>
            <el-select v-model="page_params.grade_obj_id" filterable clearable placeholder="请选择">
              <el-option
                v-for="item in teacher_data"
                :key="item.mobile"
                :label="item.realName"
                :value="item.mobile"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
              <el-col :offset="0" :span="2">
                <el-button type="primary" icon="el-icon-search" @click="refresh_data">搜索</el-button>
              </el-col>
              <el-col :offset="6" :span="2">
                <el-upload
                  class="upload-demo"
                  :action="upload_url"
                  :headers="importHeaders"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :on-success="onSuccess"
                  :on-error="onError"
                  multiple
                  :limit="1"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
                >
                  <el-button  type="primary" style="padding-top: 10px;">考勤结果上传<i class="el-icon-upload el-icon--right" /></el-button>
                </el-upload>
              </el-col>
                    
              <el-col :offset="10" :span="2">
                <el-button plain size="primary" icon="el-icon-remove-outline" type="danger" style="padding-top: 10px;" class="el-icon--right"  @click="edit"> 取消自评他评  </el-button>
              </el-col>
           </el-col>
        </el-row>
        
      </el-card>
      <div v-if="dialogVisible">
        <el-dialog
          :title="dialogTitle"
          :visible.sync="dialogVisible"
          width="30%">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
             <el-form-item>
                 <span class="title_span">取消教师的电话:</span>
             </el-form-item>
             <el-form-item>
            <el-input v-model="ruleForm.mobile" placeholder="电话" style="width: 150px;" class="filter-item" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">保 存</el-button>
              <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
    <div id="table_box">
      <el-table
        :data="tableData"
        stripe
        border
        :max-height="clientHeight-240"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="60"
        />
        <el-table-column
          prop="realName"
          label="被考评教师"
          width="200"
        />
        <el-table-column
          prop="stage_num"
          label="考评学期"
          width="100"
        />
        <el-table-column
          prop="grade_item"
          label="成绩项"
        />
        <el-table-column
          prop="option_name"
          label="考评结果"
        />
        <el-table-column
          label="得分"
          width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.opt_flg + scope.row.score/100 }}分
          </template>
        </el-table-column>
        <el-table-column
          prop="gradeByName"
          label="考评人"
          width="200"
        />
        <el-table-column
          prop="effect_time"
          label="考评时间"
          width="100"
        />
        <el-table-column label="操作" width="80" align="center">
          <template slot-scope="scope">
            <el-button
              plain
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="page_box">
      <el-pagination
        :current-page="page_params.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page_params.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="page_params.pageCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { getTeacherList, searchOneOperaterScoreRecord, deleteScoreRecord, delAllCommit } from '@/api/deductPoints'
export default {
  data() {
    return {
      clientHeight: 500,
      tableData: [],
      date_arr: [],
      teacher_data: [],
      page_params: {
        pageNum: 1,
        pageCount: 100,
        pageSize: 20,
        start_time: '',
        end_time: '',
        grade_obj_id: '',
        tableLoading: false
      },
      upload_url: process.env.VUE_APP_BASE_API + '/clockin/insertMessage',
      importHeaders: { token: window.sessionStorage.getItem('token') },
      fileList: [],
        dialogTitle: '',
        dialogVisible: false,
        gradeByOption: [],
        ruleForm: {},
        rules: {}
    }
  },
  created() {
    this.clientHeight = document.body.clientHeight
    this.getTeacherList()
    this.refresh_data()
  },
  methods: {
    handleSizeChange(val) {
      this.page_params.pageNum = 1
      this.page_params.pageSize = val
      this.refresh_data()
    },

    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
                       let data = JSON.parse(JSON.stringify(this.ruleForm));
                               delAllCommit(data).then((res) => {
                                   if (res.code != "200") {
                                       this.$message({
                                           message: res.msg,
                                           type: 'warning'
                                       });
                                   }else{
                                       this.$message({
                                           type: 'success',
                                           message: res.msg,
                                       });
                                       this.refresh_data();
                                   }
                                   this.dialogVisible = false;
                               }).catch(() => {
                                   this.dialogVisible = false;
                               })
               })
    },

    edit(){
                    this.dialogTitle = '请输入号码';
                 this.dialogVisible = true;
            },
    handleCurrentChange(val) {
      this.page_params.pageNum = val
      this.refresh_data()
    },
    change_date(arr) {
      if (arr == null) {
        this.page_params.start_time = ''
        this.page_params.end_time = ''
      } else {
        this.page_params.start_time = arr[0]
        this.page_params.end_time = arr[1]
      }
    },
    getTeacherList() {
      getTeacherList({ partID: '' }).then((res) => {
        if (res.code != '200') {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          })
        } else {
          this.teacher_data = res.data
        }
      }).catch(() => {

      })
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteScoreRecord({ id: row.id }).then((res) => {
          if (res.code != '200') {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            })
          } else {
            this.$message({
              message: res.data.msg,
              type: 'success'
            })
            this.refresh_data()
          }
        }).catch(() => {

        })
      }).catch(() => {

      })
    },
    refresh_data() {
      searchOneOperaterScoreRecord(this.page_params).then((res) => {
        if (res.code != '200') {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          })
        } else {
          this.page_params.pageCount = res.data.pageCount
          this.tableData = res.data.object
        }
      }).catch(() => {

      })
    },
    handleRemove(file, fileList) {
      console.log('123')
    },
    handlePreview(file) {
      console.log('456')
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    onSuccess() {
      this.$message({
        message: '上传成功',
        type: 'success'
      })
      this.page_params.pageNum = 1
      this.refresh_data()
    },
    onError() {
      this.$message.error('上传失败')
    }
  }
}
</script>
<style lang="scss">
    #deduction_record {
        .title_span {
            font-size: 14px;
            color: #606266;
        }
        #search_box {
            margin: 10px;
        }
        #table_box {
            margin: 10px;
        }
        #page_box {
            text-align: center;
            margin: 10px;
        }
    }
</style>
